<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
		<!-- 引入vue.js，注意引入顺序-->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<!-- 2.添加路由连接
				router-link：vue会将标签解析为a标签
				to：vue会解析为href属性
			 -->
			 
			 <router-link to="/user">用户</router-link>
			 <router-link to="/dept">部门</router-link>
			 
			 <!-- 3.定义路由占位符，当用户点击路由时，在该位置展现页面
				可以理解为一个新的div
			  -->
			 <router-view></router-view>
		</div>
		
		<template id="userComp">
			<div>
				<h1>我是用户组件</h1>
			</div>
		</template>
		
		<template id="deptComp">
			<div>
				<h1>我是部门组件</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		
		/* 4.定义组件变量 */
		const user = {
			template: '#userComp'
		}
		const dept = {
			template: '#deptComp'
		}
		
		/* 5.配置路由规则 */
		const router = new VueRouter({
			// 定义规则
			routes:[
				// 实现重定向redirect
				{path:'/',redirect:'/user'},
				{path:'/user',component:user},
				{path:'/dept',component:dept}
			]
		})
		
		/* 6.将路由组件挂在到vue中 */
		const app = new Vue({
			el:"#app",
			router: router
		})
		
	</script>
</html>
